<template>
	<view class="bg">
		<ttBar leftIcon="icon-back" title="退款详情"></ttBar>

		<!-- 1买家发起申请 -->
		<block v-if="orderData.orderRefund.status==1">
			<view class="statusBox">
				<text>退款申请处理中，请耐心等待</text>
				<text class="time">剩余{{getDjs(orderData.orderRefund.leftTime)}}</text>
			</view>
		</block>
		<!-- 2买家撤销申请 -->
		<block v-if="orderData.orderRefund.status==2">
			<view class="statusBox">
				<text>退款关闭</text>
			</view>
		</block>
		<!-- 3卖家同意 -->
		<block v-if="orderData.orderRefund.status==3">
			<view class="statusBox">
				<text>退款成功</text>
			</view>
		</block>
		<!-- 4卖家发起协商 -->
		<block v-if="orderData.orderRefund.status==4">
			<view class="statusBox">
				<text>请及时处理</text>
				<text class="time">剩余{{getDjs(orderData.orderRefund.leftTime)}}</text>
			</view>
			<view class="tishiyu">
				<text>如果您同意协商，将按卖家协商价退款</text>
				<text>如果您拒绝协商，需卖家重新处理</text>
				<text>如果您超时未处理，系统将自动拒绝本次协商</text>
			</view>
		</block>
		<!-- 5买家同意协商 -->
		<block v-if="orderData.orderRefund.status==5">
			<view class="statusBox">
				<text>退款成功</text>
			</view>
		</block>
		<!-- 6买家拒绝协商 -->
		<block v-if="orderData.orderRefund.status==6">
			<view class="statusBox">
				<text>请等待卖家处理</text>
				<text class="time">剩余{{getDjs(orderData.orderRefund.leftTime)}}</text>
			</view>
			<view class="tishiyu">
				<text>若卖家同意退款申请，退款申请达成，按原路退回</text>
				<text>若卖家超时未处理，退款自动达成，按原路退回</text>
				<text>若卖家申请客服介入，请等待客服协助双方处理</text>
			</view>
		</block>
		<!-- 7卖家申请平台介入 -->
		<block v-if="orderData.orderRefund.status==7">
			<view class="statusBox">
				<text>请等待客服处理</text>
			</view>
			<view class="tishiyu">
				<text>请保持电话畅通，平台客服将协助双方处理本次退款</text>
			</view>
		</block>
		<!-- 10已退款-->
		<block v-if="orderData.orderRefund.status==10">
			<view class="statusBox">
				<text>退款成功</text>
			</view>
		</block>
		<!-- 11已关闭 -->
		<block v-if="orderData.orderRefund.status==11">
			<view class="statusBox">
				<text>退款关闭</text>
			</view>
		</block>
		<!-- 12退款失败 -->
		<block v-if="orderData.orderRefund.status==12">
			<view class="statusBox">
				<text>退款失败</text>
			</view>
		</block>
		<view class="orderItem refoundStatus">
			<view class="priceBox" v-if="refoundData.orderRefund.status==3||refoundData.orderRefund.status==5||refoundData.orderRefund.status==10">
				<text>退款总金额:</text>
				<text class="payAmount">￥{{refoundData.orderRefund.amount}}</text>
			</view>
			<view class="xieshangBox" v-if="refoundData.orderRefund.status==4  ||refoundData.orderRefund.status==6">
				<view class="row">
					<text class="label">卖家协商价格：</text>
					<text>￥{{refoundData.orderRefund.adviseAmount}}</text>
				</view>
				<view class="row" v-if="refoundData.tradeLog.reason">
					<text class="label">卖家协商说明：</text>
					<text>{{refoundData.tradeLog.reason}}</text>
				</view>
			</view>
			<view class="opBox">
				<button @tap="chexiao" v-if="refoundData.orderRefund.status==1||refoundData.orderRefund.status==4||refoundData.orderRefund.status==6||refoundData.orderRefund.status==7 ">撤销申请</button>
				<button v-if="refoundData.orderRefund.status==4" @tap="refuse">拒绝协商</button>
				<button v-if="refoundData.orderRefund.status==4" @tap="agree">同意协商</button>
			</view>
		</view>
		<view class="dtList">
			<view class="dtItem shop">
				<text class="boxTitle">退款信息</text>
				<view class="rowBox">
					<view class="row">
						<text class="label">申请金额：</text>
						<text class="val">￥{{refoundData.firstLog.amount.toFixed(2)}}</text>
					</view>
					<view class="row">
						<text class="label">申请时间：</text>
						<text class="val">{{refoundData.firstLog.createTime}}</text>
					</view>
					<view class="row" v-if="refoundData.firstLog.type">
						<text class="label">退款原因：</text>
						<text class="val">{{reason[refoundData.firstLog.type]}}</text>
					</view>
					<view class="row" v-if="refoundData.firstLog.reason">
						<text class="label">退款说明：</text>
						<text class="val">{{refoundData.firstLog.reason}}</text>
					</view>
				</view>
			</view>
			<view class="dtItem history" @tap="toPage" data-url="consultHistory" :data-rid="refoundData.orderRefund.id">
				<text class="a">协商历史</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="dtItem orderItem">
				<view class="shopBox">
					<text class="iconfont icon-shoucangdianjia" @tap="toShop"></text>
					<text class="shopName" @tap="toShop">{{orderData.store.name}}</text>
				</view>
				<view class="goodBox" @tap="toPage" data-url="goodDetail" :data-id="orderData.courseId">
					<image class="goodImg" :src="orderData.img" ></image>
					<view class="infoBox">
						<text class="goodName" @tap="toGood">{{orderData.name}}</text>
						<view class="fuwuBox">
							<button class="orderOp" v-for="(item,index) in goodInfo.protectList" :key="index">{{item.name}}</button>
						</view>
						<text class="price">￥{{orderData.total}}</text>
					</view>
				</view>
				<view class="priceBox">
					<text>已支付:</text>
					<text class="payAmount">￥{{hejiPay}}</text>
				</view>
			</view>
			<view class="dtItem lxrBox">
				<image src="@/pagesA/static/renyuan.png"></image>
				<text>{{orderData.member?orderData.member.name:''}}</text>
				<text>联系电话:{{orderData.member?orderData.member.phone:''}}</text>
			</view>
			<view class="dtItem shop">
				<text class="boxTitle">订单信息</text>
				<view class="rowBox">
					<view class="row">
						<text class="label">订单编号：</text>
						<text class="val">{{orderData.orderNo}}</text>
					</view>
					<view class="row">
						<text class="label">创建时间：</text>
						<text class="val">{{orderData.createTime}}</text>
					</view>
				</view>
			</view>
			<view class="dtItem shop">
				<text class="boxTitle">平台客服</text>
				<view class="rowBox">
					<view class="row">
						<text class="label">客服电话：</text>
						<text class="val">025-84583336</text>
					</view>
					<view class="row">
						<text class="label">工作时间：</text>
						<text class="val">每天9:00 - 22:00</text>
					</view>
				</view>
			</view>
		</view>
		<hk-modal ref="hkModal"></hk-modal>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import COMM from "@/common/common.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			ttBar
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		data() {
			return {
				orderId: '',
				refoundId: '',
				reason: ['', '不喜欢该课程', '课程效果未达到预期', '距离远，不想去', '多拍/错拍', '因个人原因无法继续上课', '因商家原因无法上课', '商家推荐了其他课程', '其他'],
				shopReason: ['11111', '22222', '333333', '44444'],
				refoundData: {
					status: 6,
					firstLog: {
						"id": 141,
						"orderId": null,
						"operId": null,
						"amount": 0.1,
						"type": 7,
						"reason": "hjbdhhjkd",
						"operName": "牛人8555",
						"refundId": 53,
						"status": 1,
						"resList": [],
						"res": "[]",
						"createTime": "2020-03-26 13:57:41"
					},
					orderRefund: {
						adviseAmount: 0,
						amount: 0,
						orderStatus: 2,
						status: 7
					},
					tradeLog: {
						amount: 0.1,
						reason: "",
						resList: [{
							"url": "",
							"type": 1,
							"location": 0
						}, {
							"url": "",
							"type": 1,
							"location": 0
						}]
					}
				},
				orderData: {
					orderRefund: {
						status: 0,
						amount: 0
					},
					store:{
						name:''
					}
				},
				goodInfo: {
					protectList: []
				},
				hejiText: '',
				hejiPay: 0,
				statusArr: ['', '退款申请处理中', '您已撤销申请', '退款成功', '请及时处理', '您已同意协商', '请等待卖家处理', '请等待客服处理', '', '', '退款成功', '退款关闭',
					'退款失败'
				],

			};
		},
		methods: {
			getData() {
                 //获取退款详情
				this.$store.dispatch("apiGetRefoundDt", this.refoundId)
					.then(orderRes => {
						
						this.refoundData = orderRes.data.data;
						this.orderData = orderRes.data.data;
						this.getHeji();
						// this.showTimmOut();
						this.$store.dispatch("apiGetGoodDetailById", {
							id: orderRes.data.data.courseId,
							userId: this.userInfo.userId
						}).then(goodRes => {
							this.goodInfo = goodRes.data.data
						})
					})
			},
			getHeji() {
				if (this.orderData.payStatus == 1) {
					this.hejiText = "预约金合计"
					this.hejiPay = this.orderData.prepay.toFixed(2)
				} else {
					this.hejiText = "全款合计"
					this.hejiPay = this.orderData.price.toFixed(2)
				}

			},
			// 撤销退款申请
			chexiao() {
				this.$refs.hkModal.init({
					title: '确认',
					cntText: '确认要撤销退款申请？',
					confirmFcn: () => {
						this.$store.dispatch("apiApplyRefound", {
							orderId: this.refoundData.order_id,
							operId: this.userInfo.userId,
							refundId: this.refoundData.orderRefund.id,
							status: 2
						}).then(res => {
							uni.showToast({
								title: '撤销成功',
								icon: 'none'
							});
							uni.$emit("refresh");
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						})
					},
					cancleFcn: () => {

					}

				})
				this.$refs.hkModal.show()

			},
			// 获取倒计时
			getDjs(time) {
				if (time) {
					let leftTime = parseInt(time) * 1000
					let hours = parseInt(leftTime / 1000 / 60 / 60, 10); //计算剩余的小时
					let minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
					hours = checkTime(hours);
					minutes = checkTime(minutes);
					return hours + '小时' + minutes + '分钟'
				}

				function checkTime(i) { //将0-9的数字前面加上0，例1变为01
					if (i < 10) {
						i = "0" + i;
					}
					return i;
				}
			},
			// 拒绝协商
			refuse() {
				this.$refs.hkModal.init({
					title: '确认',
					cntText: '确认拒绝卖家协商？拒绝后卖家可以申请平台介入',
					confirmFcn: () => {
						this.$store.dispatch("apiApplyRefound", {
							orderId: this.refoundData.order_id,
							operId: this.userInfo.userId,
							refundId: this.refoundData.orderRefund.id,
							status: 6
						}).then(res => {
							uni.showToast({
								title: '拒绝协商成功',
								icon: 'none'
							});
							this.getData();
						})
					},
					cancleFcn: () => {

					}

				})
				this.$refs.hkModal.show()
			},
			agree() {
				this.$refs.hkModal.init({
					title: '确认',
					cntText: '确认同意卖家协商？如果您同意将按照卖家协商的退款金额退款',
					confirmFcn: () => {
						this.$store.dispatch("apiApplyRefound", {
							orderId: this.refoundData.order_id,
							operId: this.userInfo.userId,
							refundId: this.refoundData.orderRefund.id,
							status: 5
						}).then(res => {
							uni.showToast({
								title: '同意协商',
								icon: 'none'
							});
							this.getData();
						})
					},
					cancleFcn: () => {

					}

				})
				this.$refs.hkModal.show()
			}
		},
		onLoad(cfm) {
			this.orderId = cfm.oid;
			this.refoundId = cfm.rid;
			this.getData();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.bg {
		background-color: #f6f6f6;
	}

	.tishiyu {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 20upx 50upx;

		text {
			font-size: 28upx;
			color: #666666;
		}
	}

	.statusBox {
		height: 140upx;
		padding: 0 50upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFF;
		background-color: #9188b5;

		text {
			font-size: 32upx;
		}

		.iconfont {
			margin-right: 20upx;
			font-size: 36upx;
		}
	}

	.dtList {
		display: flex;
		flex-direction: column;
		padding: 18upx;
	}

	.dtItem {
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10upx;
		margin-bottom: 18upx;
	}

	.history {
		padding: 50upx 38upx;
		display: flex;

		.a {
			font-size: 32upx;
			color: #202932;
			font-weight: bold;
			flex-grow: 1;
		}
	}

	.orderItem {
		display: flex;
		flex-direction: column;
		padding: 36upx 20upx 36upx 36upx;

		.shopBox {
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 36upx;
			}

			.icon-shoucangdianjia {
				color: #202932;
				margin-right: 6upx;
			}

			.icon-right {
				color: #c9c9c9;
			}

			.orderStatus {
				color: #ffb423;
				font-size: 32upx;
				margin-top: -4upx;
				flex-grow: 1;
				text-align: right;
			}

			.shopName {
				font-size: 32upx;
				color: #202932;
				margin-top: -4upx;
			}
		}

		.goodBox {
			display: flex;
			margin-top: 32upx;

			.goodImg {
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
				margin-right: 20upx;
				flex-shrink: 0;
			}

			.infoBox {
				display: flex;
				flex-grow: 1;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
			}

			.fuwuBox {
				display: flex;
				flex-wrap: wrap;

			}

			.goodName {
				font-size: 28upx;
				color: #202932;
			}

			.priceBox {
				display: flex;
				color: #202932;
				font-size: 28upx;
				align-items: baseline;
			}

			.orderOp {
				height: 34upx;
				line-height: 30upx;
				font-size: 24upx;
				color: #ffa023;
				border-radius: 16upx;
				padding: 0 20upx;
				border: 1px solid #ffa023;
				background-color: rgba(0, 0, 0, 0);
				margin: 0;
				margin-right: 10upx;
				margin-bottom: 10upx;
			}

			.orderOp:after {
				outline: none;
				border: none;
			}

			.price {
				color: #202932;
				font-weight: bold;
				font-size: 28upx;
			}
		}

		.priceBox {
			display: flex;
			align-items: center;
			border-top: 1px solid #EEEEEE;
			margin-top: 16upx;
			font-size: 32upx;
			padding-top: 50upx;

			.payStatus {
				height: 30upx;
				line-height: 30upx;
				padding: 0 10upx;
				color: #FFFFFF;
				font-size: 20upx;
				background-color: #ffb852;
				border-radius: 3rpx;
				margin-left: 10upx;
			}

			.payAmount {
				color: #ff2020;
				font-weight: bold;
			}
		}

		.opBox {
			display: flex;
			padding-top: 40upx;
			justify-content: flex-end;

			button {
				height: 50rpx;
				line-height: 48upx;
				border-radius: 25rpx;
				border: solid 1rpx #dfdfdf;
				background-color: rgba(0, 0, 0, 0);
				color: #989898;
				font-size: 28upx;
				padding: 0 24upx;
				margin: 0;
				margin-left: 40upx;

			}

			button:after {
				border: none;

			}
		}

	}

	.boxTitle {
		padding: 18upx 20upx 18upx 36upx;
		color: #202932;
	}

	.lxrBox {
		display: flex;
		align-items: center;
		font-size: 32upx;
		padding: 36upx 20upx 36upx 36upx;

		image {
			width: 46upx;
			height: 46upx;
			margin-right: 20upx;
		}

		text {
			margin-right: 20upx;
		}
	}

	.shop {
		display: flex;
		flex-direction: column;
	}

	.shopCard {
		background-color: #FFFFFF;
		padding: 30upx 36upx;
		border-bottom: 13upx solid #f4f4f4;
		display: flex;
		align-items: center;

		.brandImg {
			width: 100upx;
			height: 100upx;
			margin-right: 30upx;
		}

		.cardInfo {
			flex: 1;
			display: flex;
			flex-direction: column;

			.shopName {
				font-size: 26rpx;
				color: #202932;
			}

			.shopAddress {
				margin-top: 14upx;
				font-size: 24rpx;
				color: #838890;
			}
		}

		.shopBtn {
			flex-shrink: 0;
			display: flex;

			image {
				width: 40upx;
				height: 40upx;
				margin-left: 36upx;
			}
		}
	}

	.rowBox {
		display: flex;
		flex-direction: column;
		padding: 18upx 20upx 18upx 36upx;

		.row {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #666666;
			margin-bottom: 10upx;
		}
	}

	.refoundStatus {
		background-color: #FFFFFF;
		padding: 0 38upx;

		.priceBox {
			border-top: none;
			padding: 50upx 10upx;
			border-bottom: 1px solid #EEEEEE;
		}

		.opBox {
			padding: 30upx 0;
		}

		.xieshangBox {
			display: flex;
			flex-direction: column;
			padding: 20upx 10upx;

			.row {
				display: flex;
				padding: 6upx;

				text {
					font-size: 32upx;
					color: #202932;
					flex-shrink: 0;
				}

				.imgBox {
					flex-grow: 1;
					display: flex;
					flex-wrap: wrap;

					image {
						width: 110upx;
						height: 110upx;
						margin-left: 20upx;
						flex-shrink: 0;
						margin-bottom: 10upx;
					}
				}

			}
		}
	}
</style>
